import styled from "styled-components"

export const RoomItemWrapper = styled.div`
  /* 如果所有项目的 flex-shrink 属性都为1，当空间不足时，都将等比例缩小。
如果一个项目的 flex-shrink 属性为0，其他项目都为1，则空间不足时，前者不缩小。 */
  flex-shrink: 0;
  width: ${(props) => props.itemWidth};
  box-sizing: border-box;
  padding: 8px;
  .inner {
    width: 100%;
  }

  .cover {
    /* padding 这样设置是因为要给图片的位置挤出空间来，原因是每个图片宽高不同 */
    position: relative;
    box-sizing: border-box;
    padding: 66.66% 8px 0;
    border-radius: 3px;
    overflow: hidden;

    img {
      /* 给 图片 添加定位，是让图片浮动在刚刚 padding 挤出的位置 */
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      /* fill 占满，cover 保证宽高比的时候铺满 */
      object-fit: cover;
    }
  }

  .swiper {
    position: relative;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;

    &:hover {
      .control {
        display: flex;
        cursor: pointer;
      }
    }

    .control {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      z-index: 9;
      display: none;
      justify-content: space-between;

      /* background-color: #eee; */
      .btn {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        width: 80px;
        color: #fff;
        &.left {
          background: linear-gradient(
            to left,
            transparent 0%,
            rgba(0, 0, 0, 0.25) 100%
          );
        }
        &.right {
          background: linear-gradient(
            to left,
            transparent 0%,
            rgba(0, 0, 0, 0.25) 100%
          );
        }
      }
    }
  }

  .desc {
    margin: 10px 0 5px;
    font-size: 12px;
    font-weight: 400;
    text-shadow: 1px 1px 2px #ddd;
  }

  .name {
    margin: 8px 0;
    font-size: 14px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .price {
    margin: 8px 0;
    font-size: 14px;
    /* letter-spacing: 0.5px;
    word-spacing: 0.5px; */
    text-shadow: 1px 1px 2px #ddd;
  }
  .bottom {
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    color: ${(props) => props.theme.text.primaryColor};

    .count {
      margin: 0 2px 0 4px;
    }

    /* MuiRating-decimal 表示评分星星的间距 */
    .MuiRating-decimal {
      margin-right: -2px;
    }
  }

  .indicator {
    position: absolute;
    z-index: 9;
    left: 0;
    right: 0;
    bottom: 10%;
    width: 30%;
    margin: 0 auto;
    .item-dot {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 20%;
      .dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: #fff;
        &.active {
          background-color: skyblue;
          width: 9px;
          height: 9px;
          border-radius: 50%;
        }
        &.subActive {
          width: 3px;
          height: 3px;
          border-radius: 50%;
        }
      }
    }
  }
`
